<template>
	<view class="menus">
		<image :src="bgImg" class="bg"></image>
		<view class="btnList">
			<view v-for="(item, i) in btnList" class="cont" @click="toDetails(item.url)"></view>
		</view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular vertical autoplay :interval="3000" :disable-touch="true" :duration="12000">
				<swiper-item v-for="(item, i) in bannerList">
					<view class="swiper-item">
						<image :src="item.url"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			btnList: [{
				url: 'storyLine'
			},
			{
				url: 'dataLibrary'
			},
			{
				url: 'leaderboard'
			},
			{
				url: 'album'
			},
			{
				url: 'settings'
			}
			],
			bannerList: [
			],
			bgImg: null
		}
	},
	onShow() {
		this.getBannerId()
		this.getBgImg()
	},
	methods: {
		getBgImg() {
			uni.request({
				url: this.configs.gameUrl + '/play/mFile/list',
				method: 'GET',
				header: {
					'X-Access-Token': this.configs.userToken // 在header中添加token
				},
				data: {
					resourceId: uni.getStorageSync('backgroundImage'),
					userId: this.configs.userId
				},
				success: data => {
					this.bgImg = data.data.result.records[0].url
				},
				fail: (data, code) => { }
			});
		},
		toDetails(url) {
			uni.navigateTo({
				url: '/pages/client/games/' + url
			});
		},
		getBannerId() {
			uni.request({
				url: this.configs.gameUrl + '/play/mResource/list',
				method: 'GET',
				header: {
					'X-Access-Token': this.configs.userToken // 在header中添加token
				},
				data: {
					pageSize: 200,
					type: 'carousel',
					userId: this.configs.userId
				},
				success: data => {
					console.log(data.data.result.records[0].id)
					this.getBannerList(data.data.result.records[0].id)
				},
				fail: (data, code) => { }
			});
		},
		getBannerList(id) {
			uni.request({
				url: this.configs.gameUrl + '/play/mFile/list',
				method: 'GET',
				header: {
					'X-Access-Token': this.configs.userToken // 在header中添加token
				},
				data: {
					resourceId: id,
					pageSize: 200,
					userId: this.configs.userId
				},
				success: data => {
					this.bannerList = data.data.result.records
					console.log(data.data.result.records, 222)
				},
				fail: (data, code) => { }
			});
		}
	}
}
</script>

<style scoped lang="less">
.menus {
	width: 100%;
	height: 100%;
	color: #000;
	overflow: hidden;

	.bg {
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}

	.btnList {
		width: 400rpx;
		height: 66vh;
		margin-left: 110rpx;
		margin-top: 28vh;
		position: relative;
		z-index: 2;

		.cont {
			width: 100%;
			height: 20%;
		}
	}

	.uni-margin-wrap {
		width: 50%;
		height: 100%;
		position: fixed;
		right: 20rpx;
		top: 0;
	}

	.swiper {
		height: 100%;
	}

	swiper-item {
		height: 240rpx !important;
	}

	.swiper-item {
		display: block;
		height: 200rpx;
		border-radius: 10rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 200rpx;
		}
	}

}
</style>